<template>
	<view class="category_scroll_box">
		<view class="category_scroll_box__left">
			<scroll-view scroll-y="true" :style="{ height: windowHeight + 'px' }">
				<view
					v-for="(item, index) in categoryList"
					:key="item.cat_id"
					class="category_scroll_box__left--name"
					:class="{ 'category_scroll_box__left--active': index === activeIndex }"
					@click="handleActiveChange(index)"
				>
					{{ item.cat_name }}
				</view>
			</scroll-view>
		</view>
		<view class="category_scroll_box__right" :scroll-top="scrollTop">
			<scroll-view scroll-y="true" :style="{ height: windowHeight + 'px' }">
				<view v-for="i2 in cateLeveTow" :key="i2.cat_id" class="category_scroll_box__right--title">
					/ {{ i2.cat_name }} /
					<view class="category_scroll_box__right__conten">
						<view class="category_scroll_box__right__conten__item" v-for="i3 in i2.children" :key="i3.cat_id" @click="handleNavToGoodsDetail(i3.cat_id)">
							<image :src="i3.cat_icon" style="width:60px;height:60px"></image>
							<text>{{ i3.cat_name }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive, toRefs } from 'vue';
interface CategoryItem {
	cat_deleted: boolean;
	cat_icon: string;
	cat_id: string;
	cat_level: number;
	cat_name: string;
	cat_pid: string;
	children: CategoryItem[];
}
const pageData = reactive<{ windowHeight: number; categoryList: CategoryItem[]; activeIndex: number; cateLeveTow: CategoryItem[]; scrollTop: number }>({
	windowHeight: 0,
	categoryList: [],
	activeIndex: 0,
	cateLeveTow: [],
	scrollTop: 0
});
const { windowHeight, categoryList, activeIndex, cateLeveTow, scrollTop } = toRefs(pageData);

initCategory();

uni.getSystemInfo({
	success: function(res) {
		windowHeight.value = res.windowHeight;
	}
});
async function initCategory() {
	const {
		data: { meta, message }
	} = await uni.$http.get('api/public/v1/categories');
	if (meta.status !== 200) {
		uni.$showMsg();
	}
	categoryList.value = message;
	cateLeveTowChange(0);
}
const handleActiveChange = (index: number) => {
	activeIndex.value = index;
	cateLeveTowChange(index);
};
const cateLeveTowChange = (index: number) => {
	cateLeveTow.value = categoryList.value[index].children;
	scrollTop.value = scrollTop.value ? 0 : 1;
};
const handleNavToGoodsDetail = (id: string) => {
	uni.navigateTo({
		url: '/subPak/goods_list/goods_list?id=' + id
	});
};
</script>

<style lang="scss">
.category_scroll_box {
	display: flex;
	.category_scroll_box__left {
		width: 120px;
		flex-shrink: 0;
		.category_scroll_box__left--name {
			height: 60px;
			line-height: 60px;
			text-align: center;
			position: relative;
			background-color: #f7f7f7;
			&::before {
				content: ' ';
				display: block;
				width: 3px;
				height: 30px;
				position: absolute;
				top: 50%;
				transform: translate(0, -50%);
				background: #c00000;
				left: 10rpx;
			}
		}
	}
	.category_scroll_box__right {
		flex: 1;
		background: #fff;
	}
	.category_scroll_box__left--active {
		background: #fff !important;
	}
	.category_scroll_box__right--title {
		font-size: 24rpx;
		font-weight: 700;
		text-align: center;
		padding: 15px 0;
	}
	.category_scroll_box__right__conten {
		display: flex;
		flex-wrap: wrap;
	}
	.category_scroll_box__right__conten__item {
		width: 33.33%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 10px;
		text {
			font-size: 12px;
		}
	}
}
</style>
